<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管路页面</title>
</head>
<link rel="stylesheet" href="./css/bootstrap.css">
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">用户管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li> <a href="#">欢迎******</a></li>
            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="app">
<!--中心布局-->
<div class="container-fluid">
    <!--搜索框-->
    <div class="row">
        <div class="col-md-8 col-md-offset-1">
            <form class="form-inline">
                <div class="form-group">
                    <label >姓名</label>
                    <input type="text" class="form-control" id="searchname" placeholder="Jane Doe" v-model="searchname">
                </div>
                <div class="form-group">
                    <label >电话号码</label>
                    <input type="text" class="form-control" id="searchphone" placeholder="" v-model="searchphone">
                </div>
                <button type="button" class="btn btn-info" @click="search">搜索</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <!--用户信息展示-->
            <table class="table table-striped table-bordered">
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>工资</th>
                    <th>电话号码</th>
                    <th>操作</th>
                </tr>
                <tbody>
                <tr v-for="user,index in users" :key="user.id">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.salary}}</td>
                    <td>{{user.phonenumber}}</td>

                    <td><button class="btn-danger"@click="deleteuserbyid(user.id)">删除</button> &nbsp;
                        &nbsp;<button class="btn-primary" @click="findoneuser(user.id)">修改</button></td>

                </tr>


                </tbody>
            </table>
        </div>
        <div class="col-md-4">
            <form>
                <div class="form-group">
                    <label for="username">姓名</label>
                    <input type="text" class="form-control" id="username" v-model="user1.name" placeholder="输入姓名">
                </div>
                <div class="form-group">
                    <label for="age">age</label>
                    <input type="text" class="form-control" id="age" v-model="user1.age" placeholder="年龄">
                </div>
                <div class="form-group">
                    <label for="salary">薪资</label>
                    <input type="text" class="form-control" id="salary" v-model="user1.salary" placeholder="工资">
                </div>

                <div class="form-group">
                    <label for="phonenumber">电话号码</label>
                    <input type="password" class="form-control" id="phonenumber" v-model="user1.phonenumber"
                           placeholder="电话">
                </div>

                <button type="button" class="btn btn-default" @click="saveuser">插入</button>
                <button type="reset" class="btn btn-danger" >重置</button>
            </form>
        </div>
    </div>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>

<script>
     const app= new  Vue(
         {
             el:"#app",
             data:{
                 users:[],//数据赋值来源于后端服务接口，在页面加载完成前完成赋值

                 user1:{},//完成数据交换 双向绑定
                 //搜索用的参数
                 searchname: '',
                 searchphone: ''

             },
             methods:{
                 saveuser:function () {
                       console.log(this.user1);

                        let  that=this;
                       axios.post("http://localhost:8989/user/user/save",this.user1).then(function (response) {
                           console.log(response.data);

                           if(response.data.success)
                           {
                               that.findall();
                               //把上次的信息清空
                               that.user1={};
                           }else
                           {
                               alert(response.data.message)
                           }

                       }).catch(function (error) {
                           console.log()

                       })

                 },

                 //查询所有用户信息函数
                 findall:function () {
                     let  that=this;
                     axios.get("http://localhost:8989/user/user/findall").then(function (response) {
                         console.log(response);
                         that.users=response.data;

                     }).catch(Error)
                     {
                         console.log(Error);
                     }
                 },

                 deleteuserbyid:function (id) {

                     if (window.confirm("是否删除"))
                     {
                         console.log(id);
                         let that=this;
                         //发删除请求
                         axios.get("http://localhost:8989/user/user/delete?id="+id).then(function (response) {
                             console.log(response.data);
                             if (response.data.success)
                             {
                                 //更新页面
                                 that.findall();
                             }
                             else
                             {
                                 alert(response.data.message)
                             }

                         }).catch(Error)
                         {
                             console.log(Error);
                         }
                     }


                 },
                 findoneuser:function (id) {
                     //根据id查一个信息
                     let that=this;
                     axios.get("http://localhost:8989/user/user/finduserbyid?id="+id).then(function (response) {
                         console.log(response.data);

                         that.user1=response.data;

                     }).catch(Error)
                     {
                         console.log(Error);
                     }
                 },
                 search:function () {
                     console.log(this.searchname+this.searchphone);
                     let that=this;

                     axios.get("http://localhost:8989/user/user/findlike?name="+this.searchname+"&code="+this.searchphone).then(
                         function (response) {
                            console.log(response.data);
                            that.users=response.data;
                         }
                     ).catch()

                 }



             }
             ,
             //生命周期相关函数
             created()
             {
                this.findall();
             }
         }
     )
</script>
</body>
</html>